<template>
  <div class="cart">
    <div class="cart-header">
      <div class="inp">
        <el-input placeholder="请输入内容" v-model="inputHeader">
          <template slot="prepend">卡号头部</template>
        </el-input>
      </div>
      <div class="f-box">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="centerDialogVisible = true"
          >添加卡号</el-button
        >
        <el-dialog
          title="添加新的卡号"
          :visible.sync="centerDialogVisible"
          width="30%"
          center
        >
          <div class="input-card-header">
            <span>卡号头部：</span>
            <el-input
              v-model="add.card_header"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="input-card-type">
            <span>卡类型：</span
            ><el-select v-model="add.card_type" placeholder="请选择">
              <el-option key="虚拟卡" label="虚拟卡" value="虚拟卡"></el-option>
              <el-option key="实体卡" label="实体卡" value="实体卡"></el-option>
            </el-select>
          </div>
          <div class="input-affiliation">
            <span>卡归属：</span
            ><el-select v-model="add.affiliation" placeholder="请选择">
              <el-option key="大客户" label="大客户" value="大客户"></el-option>
              <el-option key="合伙人" label="合伙人" value="合伙人"></el-option>
            </el-select>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogCenter">确 定</el-button>
          </span>
        </el-dialog>
        <div class="radio">
          <div>归属：</div>
          <el-radio v-model="radio" label="大客户" @change="radioChange"
            >大客户</el-radio
          >
          <el-radio v-model="radio" label="合伙人" @change="radioChange"
            >代理</el-radio
          >
        </div>
        <div class="btn">
          <el-button size="mini" icon="el-icon-search" @click="search"
            >查询</el-button
          >
          <el-button size="mini" icon="el-icon-refresh-right" @click="refresh"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <el-table :data="currentP" style="width: 100%" height="60%">
      <el-table-column label="ID" prop="id"> </el-table-column>
      <el-table-column label="卡号头部" prop="card_header"> </el-table-column>
      <el-table-column label="卡类型" prop="card_type"> </el-table-column>
      <el-table-column label="归属" prop="affiliation"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :page-count="paginationTotal"
        :current-page="currentPage"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>

    <el-dialog
      class="editDialog"
      title="提示"
      :visible.sync="editDialogVisible"
      width="30%"
      center
    >
      <span>请输入新的卡号头部</span>
      <el-input v-model="newHeader"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vue from "vue";
import {
  Button,
  Table,
  TableColumn,
  Input,
  Pagination,
  Radio,
  Dialog,
  Select,
  Option,
  Message,
  MessageBox,
} from "element-ui";
import {
  getCardNumber,
  findCardNumber,
  addCardNumber,
  findCardNumberByHeader,
  updateCardNumber,
  deleteCardNumber,
} from "../../network/2-card/cart.js";
vue.use(Button);
vue.use(Table);
vue.use(TableColumn);
vue.use(Input);
vue.use(Pagination);
vue.use(Radio);
vue.use(Dialog);
vue.use(Select);
vue.use(Option);
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      // search: "",
      inputHeader: "",
      radio: "",
      centerDialogVisible: false,
      add: {
        //添加卡的数据
        card_type: "",
        affiliation: "",
        card_header: "",
      },
      editDialogVisible: false,
      newHeader: "",
      curChangeRow: {}, //当前编辑删除行
    };
  },
  created() {
    getCardNumber().then((res) => {
      this.tableData = res.data.data;
    });
  },
  methods: {
    handleEdit(index, row) {
      this.curChangeRow = row;
      this.editDialogVisible = true;
    },
    handleDelete(index, row) {
      this.curChangeRow = row;
      MessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteCardNumber(this.curChangeRow.id).then(() => {
            getCardNumber().then((res) => {
              this.tableData = res.data.data;
            });
          });
          this.curChangeRow = {};
          Message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消删除",
          });
          this.curChangeRow = {};
        });
    },
    currentChange(cur) {
      this.currentPage = cur;
    },
    radioChange(i) {
      //大客户和代理切换
      findCardNumber(i).then((res) => {
        this.tableData = res.data.data;
      });
      this.currentPage = 1;
    },
    dialogCenter() {
      //添加卡
      if (this.add.card_type && this.add.card_header && this.add.affiliation) {
        this.centerDialogVisible = false;
        addCardNumber(this.add).then((res) => {
          if (res.status == 200) {
            Message({
              message: "添加成功",
              type: "success",
            });
            getCardNumber().then((res) => {
              this.tableData = res.data.data;
            });
          } else {
            Message.error("添加失败");
          }
        });
        for (let i in this.add) {
          this.add[i] = "";
        }
      } else {
        Message.error("输入不能为空");
      }
      this.radio=''
    },
    search() {
      //按头部查询
      findCardNumberByHeader(this.inputHeader).then((res) => {
        this.tableData = res.data.data;
        Message({
          message: "查询成功",
          type: "success",
        });
      });
      this.inputHeader = "";
      this.currentPage = 1;
    },
    refresh() {
      //重置
      getCardNumber().then((res) => {
        this.tableData = res.data.data;
        this.radio = "";
      });
      this.inputHeader = "";
      this.currentPage = 1;
    },
    edit() {
      //跟新卡
      updateCardNumber(this.curChangeRow.id, this.newHeader).then((res) => {
        if (res.data.code == 200) {
          Message({ message: res.data.msg });
        }
        this.curChangeRow = {};
        this.editDialogVisible = false;
        this.newHeader = "";
        getCardNumber().then((res) => {
          this.tableData = res.data.data;
        });
      });
    },
  },
  computed: {
    paginationTotal() {
      return Math.ceil(this.tableData.length / 4);
    },
    currentP() {
      return this.tableData.slice(
        (this.currentPage - 1) * 4,
        (this.currentPage - 1) * 4 + 4
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.cart {
  height: 100%;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.cart-header {
  height: 20%;

  .inp {
    width: 100%;
    text-align: left;
    .el-input {
      width: 40%;
    }
  }
  .f-box {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
  }
  .radio {
    width: 30%;
    display: flex;
    align-items: center;
  }
}

.el-dialog {
  //添加卡号
  input-card-type,
  input-affiliation,
  .input-card-header {
    display: flex;
    justify-content: space-between;

    span {
      /* vertical-align: middle; */
      /* width: 40%; */
      line-height: 40px;
      width: 100px;
    }
    .el-select {
      width: 300px;
    }
  }
}
.editDialog {
  //编辑卡
  span {
    line-height: 150%;
  }
}
</style>